<template>
  <div>
    <div class="empty" v-show="isEmpty">
      <img src="https://test.hrycf.com/hryxcx/empty1.png" alt="" class="img" mode="widthFix">
      <div class="info">{{ info }}</div>
      <div class="tips">{{ tips }}</div>
    </div>
    <div class="common" v-show="toTheEnd">底都被你看光啦~</div>
    <div class="common" v-show="isMore">正在加载中<van-loading type="spinner" /></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
    export default {
      name: "reachBottom",
      props:{
        info: {
          type: String,
          default: '暂无数据～'
        },
        tips: {
          type: String,
          default: ''
        }
      },
      computed: {
        ...mapState([
          'toTheEnd',
          'isMore',
          'isEmpty'
        ])
      },
    }
</script>

<style scoped>
  .common{
    text-align: center;
    color:rgba(102,102,102,1);
    font-size: 24rpx;
    padding-bottom: 40rpx;
	width: 100%;
  }
  .empty{
    width: 100%;
    text-align: center;
  }
  .img{
    width: 242rpx;
	margin-top: 128rpx;
	margin-bottom: 53rpx;
  }
  .info{
	  font-size:30rpx;
	  font-family:PingFang SC;
	  color: #666666;
  }
  .tips{
    font-size: 24rpx;
    color: #a09da0;
    line-height: 60rpx;
  }
</style>
